<template>
  <div class="app-container">
    <TableFilter
      :data="filter"
      v-model="query"
      ref="filter"
      @change="changeFilter"
    ></TableFilter>
    <div v-loading="loading" id="echarts-box"></div>
  </div>
</template>

<script lang="ts">
import TableFilter from "@/components/TableFilter";
import { Component, Vue } from "vue-property-decorator";
import { getBzqs, getBzData } from "@/api/statistics";
import * as echarts from "echarts";
import { ECharts } from "echarts";
import dayjs from "@/utils/dayjs.min.js";
@Component({
  name: "bzqsInfo",
  components: {
    TableFilter,
  },
  computed: {
    filter() {
      return {
        date: {
          props: {
            options: [{ label: "时间段", value: "0" }],
            isTwoRange: true,
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          },
          keys: ["timeType", "kssj", "jssj"],
        },
        inline: [
          // {
          //   props: {
          //     label: "病组",
          //     is: "el-input",
          //   },
          //   data: {
          //     attrs: {
          //       placeholder: "病种编码、名称",
          //     },
          //   },
          //   keys: "keywords",
          // },
          // {
          //   props: {
          //     label: "盈亏状态",
          //     is: "el-select",
          //     options: [
          //       { label: "盈利", value: "1" },
          //       { label: "亏损", value: "2" },
          //     ],
          //   },
          //   data: {
          //     attrs: {
          //       placeholder: "请选择",
          //     },
          //   },
          //   keys: "yk",
          // },
          // {
          //   props: {
          //     label: "病组数量",
          //     is: "el-select",
          //     options: [
          //       { label: "前10病组", value: "10" },
          //       { label: "前20病组", value: "20" },
          //       { label: "前30病组", value: "30" },
          //       { label: "前40病组", value: "40" },
          //       { label: "前50病组", value: "50" },
          //     ],
          //   },
          //   data: {
          //     attrs: {
          //       placeholder: "请选择",
          //     },
          //   },
          //   keys: "size",
          // },
          {
            props: {
              label: "病组",
              is: "el-select",
              filterable: true, //远程搜索需要
              remote: true, //远程搜索需要

              "remote-method": (e) => {
                this.getBzList(e);
              },
              options: this.bzList,
            },
            data: {
              attrs: {
                placeholder: "请输入关键字搜索",
              },
            },
            keys: "keywords",
          },
        ],
      };
    },
  },
})
export default class extends Vue {
  protected chart!: ECharts | null;
  private dataInfo: any = null;
  private selectName: any = "";
  private bzList: any = [];
  private loading: any = false;
  private query: any = {
    timeType: "0",
    keywords: "",
    yk: "1",
    size: "10",
    kssj: dayjs().subtract(3, "month").format("YYYY-MM-DD"),
    jssj: dayjs().format("YYYY-MM-DD"),
  };
  private async created() {
    this.query = this.$route.query;
    this.getData();

    // console.log(this.$route.query, "query====================================");
  }
  private mounted() {
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  }
  private async getBzList(key) {
    const res = await getBzData({ key });
    this.bzList = res.data.map((v) => {
      return {
        label: `${v.fzbm}-${v.fzmc}`,
        value: v.fzbm,
      };
    });
  }
  private async getData() {
    //查找选择的病组名
    const selectItem = this.bzList.filter(
      (v) => v.value === this.query.keywords
    );

    if (selectItem.length) {
      this.selectName = selectItem[0].label;
    }
    console.log(selectItem, this.selectName, "==================");
    this.loading = true;
    const res = await getBzqs(this.query);
    this.loading = false;
    this.dataInfo = res.data;
    const xData = res.data.map((v) => v.rq);
    const yData = res.data;
    this.$nextTick(() => {
      this.initChart(xData, yData);
    });
  }
  private changeFilter(e) {
    console.log(e);

    let data = {
      ...e,
    };
    for (let key in data) {
      if (!data[key] && data[key] != 0) delete data[key];
    }
    this.query = data;

    this.getData();
  }
  private initChart(xData: Array<any>, yData: Array<any>) {
    let _this = this;
    let option = {
      title: {
        text: this.selectName
          ? `[${this.selectName || ""}]盈亏趋势分析`
          : "盈亏趋势分析",
      },
      tooltip: {
        trigger: "axis",
        formatter(params) {
          let str = _this.selectName
            ? `${params[0].name}[${_this.selectName.split("-")[0]}]<br />`
            : `${params[0].name}<br />`;
          params.map((item) => {
            str += `${item.marker}${item.seriesName}：${item.value}<br />`;
          });
          return str;
        },
      },
      legend: {
        show: false,
        data: ["盈亏金额"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: xData,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "次均费用",
          type: "line",
          data: yData.map((v) => (v.次均费用 ? v.次均费用.toFixed(2) : "")),
        },
        {
          name: "标杆费用",
          type: "line",
          data: yData.map((v) => (v.标准总费用 ? v.标准总费用.toFixed(2) : "")),
        },
        {
          name: "盈亏金额",
          type: "line",
          data: yData.map((v) => (v.je ? v.je.toFixed(2) : "")),
        },
      ],
    };
    if (!this.chart) {
      this.chart = echarts.init(
        document.getElementById("echarts-box") as HTMLDivElement
      );
    }
    this.chart.setOption(option);
  }
}
</script>

<style lang="scss" scoped>
#echarts-box {
  width: 100%;
  min-height: 700px;
  margin-top: 20px;
}
</style>
